<template>
  <div>
    <div class="navleft">
      <ul class="nav">
        <li
          :class="$route.name == 'systemglzuzhi' ? 'active' : ''"
          @click="$router.push({ name: 'systemglzuzhi' })"
        >
          <img
            v-if="$route.name == 'systemglzuzhi'"
            src="~@img/system/superuser-icon01-select.png"
            alt
          />
          <img v-else src="~@img/system/superuser-icon01-normal.png" alt />
          用户信息管理
        </li>
        <li
          :class="
            $route.name == 'systemglhou' || $route.name == 'systemglzuzhibianj2'
              ? 'active'
              : ''
          "
          @click="$router.push({ name: 'systemglhou' })"
        >
          <img
            v-if="
              $route.name == 'systemglhou' ||
                $route.name == 'systemglzuzhibianj2'
            "
            src="~@img/system/superuser-icon02-select.png"
            alt
          />
          <img v-else src="~@img/system/superuser-icon02-normal.png" alt />
          组织架构管理
        </li>

        <li
          :class="
            $route.name == 'systemgljuese' || $route.name == 'systemgljueseadd'
              ? 'active'
              : ''
          "
          @click="$router.push({ name: 'systemgljuese' })"
        >
          <img
            v-if="
              $route.name == 'systemgljuese' ||
                $route.name == 'systemgljueseadd'
            "
            src="~@img/system/superuser-icon03-select.png"
            alt
          />
          <img v-else src="~@img/system/superuser-icon03-normal.png" alt />
          角色权限管理
        </li>
        <li
          :class="$route.name == 'systemglshuju' ? 'active' : ''"
          @click="$router.push({ name: 'systemglshuju' })"
        >
          <img
            v-if="$route.name == 'systemglshuju'"
            src="~@img/system/superuser-icon04-select.png"
            alt
          />
          <img v-else src="~@img/system/superuser-icon04-normal.png" alt />
          数据字典管理
        </li>
        <li
          :class="$route.name == 'feedback' ? 'active' : ''"
          @click="$router.push({ name: 'feedback' })"
        >
          <img
            v-if="$route.name == 'feedback'"
            src="~@img/system/superuser-icon05-select.png"
            alt
          />
          <img v-else src="~@img/system/superuser-icon05-normal.png" alt />
          技术反馈
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "navleft",
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label",
      },
      data: "",
      navleftdata: [],
      treeExpandData: [],
    };
  },
};
</script>
<style lang="less" scoped>
.navleft {
  background-color: #fff;
  width: 300px;
  min-height: 88vh;
  float: left;
  position: fixed;
  .nav {
    text-align: left;
    font-size: 16px;
    color: #222;
    margin-bottom: 2px;
    padding-top: 10px;
    img {
      vertical-align: middle;
      margin-right: 10px;
    }
    li {
      height: 60px;
      line-height: 60px;
      padding-left: 30px;
      list-style: none;
      cursor: pointer;
      font-size: 20px;
      color: #333333;
    }
    li.active {
      font-weight: bold;
      color: #446db3;
      background: #f7faff;
      border-right: 4px solid #446db3;
    }
  }
  /deep/.el-tree-node__label {
    font-size: 16px;
    color: #222222;
  }
  /deep/.is-expanded {
    .el-tree-node__content {
      .el-tree-node__label {
        color: #fe6a00;
      }
    }
    .el-tree-node__children {
      .el-tree-node__label {
        color: rgba(102, 102, 102, 1);
      }
    }
  }

  /deep/.el-tree-node__content {
    height: 50px;
    border-bottom: 1px solid #eee;
    // .el-icon-caret-right:before {
    //   content: "";
    //   width: 9px;
    //   height: 8px;
    //   display: block;
    //   background: url("../assets/merchantsradar/xia.png") no-repeat;
    // }
    // .expanded:before {
    //   transform: rotate(-90deg);
    //   background: url("../assets/merchantsradar/shang.png") no-repeat;
    // }
    .el-tree-node__expand-icon.is-leaf:before {
      background-image: unset;
    }
  }
}
</style>
